<template>
	<view class="Approvalmanagement">
		<!-- 审批类型的选项卡 -->
		<view class="flex tabs background-f">
			<view class="flex1 text-center tab-items" v-for="(item, index) in tabs" :key="index"
				@click="changeActive(index)" :class="{ active: index == actived }">
				<text style="font-weight: 700;">{{ item }}</text>
				<view :class="{ line: index == actived }"></view>
			</view>
		</view>

		<!-- 审批详情 -->
		<view class="flex margin16">
			<!-- 入会审批 -->
			<view class="flex1 left flex" @click="goMembershipApprovalDetails">
				<view>
					<view class="text-number">10</view> <!-- 示例数据 -->
					<view class="text-app">转入申请</view>
					<view class="text-app">转出申请</view>
				</view>
				<image src="../../static/images/yishenhe.png" class="left-img" mode=""></image> <!-- 已审批图标 -->
			</view>
			
			<!-- 转会审批 -->
			
			<view class="flex1 right flex" @click="goTransferApprovalDetails">
				<view>
					<view class="text-number marginb8">10</view> <!-- 示例数据 -->
					<view class="text-right">转入申请</view>
				</view>
				<image src="../../static/images/daishenhe.png" class="right-img" mode=""></image> <!-- 待审批图标 -->
			</view>
		</view>

		<!-- 列表视图的选项卡 -->
		<view class="flex tabs background-f background-fs-bottom">
			<view class="flex1 text-center tab-items" v-for="(item, index) in tablist" :key="index"
				@click="changeTabList(index)" :class="{ active: index == activeList }">
				<text style="font-weight: 700;">{{ item }}</text>
				<view :class="{ line: index == activeList }"></view>
			</view>
		</view>

		<!-- 审批记录列表 -->
		<view v-if="actived == 0&&applyjoinunionnode.length>0" class="list">
			<z-paging ref="paging" v-model="dataList" @query="queryList">
				<view v-for="(item, index) in dataList" :key="item.id" class="background-f borderradius margin8-16 ">
					<!-- 1 -->
					<MembershipRecordComponents v-if="activeList==0" :item="item" :activeList="activeList"
						:applyjoinunionnode="applyjoinunionnode" />
					<MembershipRecordComponentsFalse v-if="activeList==1" :item="item" :activeList="activeList"
						:applyjoinunionnode="applyjoinunionnode" />
					<MembershipRecordComponentsTrue v-if="activeList==2" :item="item" :activeList="activeList"
						:applyjoinunionnode="applyjoinunionnode" />

				</view>
			</z-paging>
		</view>

		<view v-if="actived == 1" class="list">
			<z-paging ref="pagingTest" v-model="dataListTest" @query="queryList">
				
				<view v-for="(item, index) in dataListTest" :key="item.id"
					class="background-f borderradius margin8-16 padding16" @click="goapprovaldetailsOptions(item)">
					
					<view class="item" >
						<view class="item-name flex1">{{ item.applyUserName }}</view>
						<view class="item-title flex2">
							<view class="item-phone">{{maskedPhoneNumber(item.applyPhoneL) }}</view>
							<view class="item-code">{{ maskedIdCard(item.applyIdCard) }}</view>
						</view>
						<view class="flex1 text-end transferout">
							<text class="transferout-status" :class="{ pending: activeList == 0 }">
								{{ activeList == 0 ? '审批' : (activeList == 1 ? '已通过' : '已驳回') }}
							</text>
						</view>
					</view>
					
					<view class="time flex" style="justify-content: space-between;">
						<view>
							<text style="display: block;" class="flex1">申请时间：{{ item.createTime }}</text>
							<text style="display: block;" class="flex1"
								v-if="activeList !== 0">审批时间：{{ item.approvalDate }}</text>
						</view>
						<text class="transferout-status"
							style="margin-top: 25rpx;float: right;color: rgb(189, 26, 45);">
							{{applyjoinunionnodeItem(item.presentApprovalNode?item.presentApprovalNode:item.approvalNode) }}
						</text>
					</view>
					
				</view>
				
			</z-paging>
		</view>
	</view>
	
</template>

<script>
	
	import MembershipRecordComponents from '../../components/approvalmanagementComponents/MembershipRecordComponents.vue'
	import MembershipRecordComponentsTrue from '../../components/approvalmanagementComponents/MembershipRecordComponentsTrue.vue'
	import MembershipRecordComponentsFalse from '../../components/approvalmanagementComponents/MembershipRecordComponentsFalse.vue'

	import {
		getDictsList
	} from '../../api/system/dicts';
	import {
		selectWaitAuditEnrollApprovalRecords,
		selectWaitAuditTransferApprovalRecords,
		selectFinishEnrollApprovalRecords,
		selectApprovalsPassed,
		CheckTheTransferDetailsPage
	} from '../../api/work/approvalmanagement';
	import {
		toast
	} from '../../utils/common';

	const TABS = ["入会审批", "转会审批"];
	const TABLIST = ["待审批", "审批通过", "审批拒绝"];

	export default {
		data() {
			return {
				dataInfo: [],
				actived: 0,
				tabs: TABS,
				activeList: 0,
				tablist: TABLIST,
				dataList: [],
				dataListTest: [],
				applyjoinunionnode: [],
				pageNum: 0,
				pageSize: 10,
				requestSource: 2,
				approvalmanagementData: null
			};
		},
		onShow() {
			this.pageNum = 0; // 页面显示时重置页码
			if (this.approvalmanagementData) {
				this.formDataSet(this.approvalmanagementData); // 已有数据时请求审批记录
			} else {
				this.getUserInfo(); // 获取用户信息
			}
		},
		components: {
			MembershipRecordComponents,
			MembershipRecordComponentsTrue,
			MembershipRecordComponentsFalse
		},
		created() {
			this.getDictsListData()
		},
		methods: {
			applyjoinunionnodeItem(row) {
				const matchedItem = this.applyjoinunionnode.find(item => item.dictValue == row);
				return matchedItem ? matchedItem.text : '未知';
			},
			getDictsListData() {
				getDictsList('apply_join_union_node').then(res => {
					this.applyjoinunionnode = res.data.map(item => {
						return {
							...item,
							text: item.dictLabel,
							value: item.dictValue
						}
					})
				}).catch(err => {
					console.log(err);
				})
			},
			maskedIdCard(idCard) {
				return idCard ? idCard.replace(/^(\d{6})\d+(\d{4})$/, '$1********$2') : '';
			},

			maskedPhoneNumber(phone) {
				return phone ? phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2') : '';
			},


			goapprovaldetails(item) {
				const url = this.activeList == 0 ?
					`/pages/work/approvaldetails?id=${item.id}` :
					`/pages/work/approvaldetails?id=${item.id}&activeList=${this.activeList}`;
				this.$tab.navigateTo(url);
			},

			goapprovaldetailsOptions(item) {
				const url = this.activeList == 0 ?
					`/pages/work/approvaldetailsOptions?id=${item.id}` :
					`/pages/work/approvaldetailsOptions?id=${item.id}&activeList=${this.activeList}`;
				this.$tab.navigateTo(url);
			},

			getUserInfo() {
				const {
					platform
				} = uni.getSystemInfoSync();
				const isMobile = platform == 'ios' || platform == 'android';
				const credentials = 'PhoneNumberCredential&UnionCredential&OrgMemberCredential';

				this.userTopAuth(isMobile, credentials)
					.then(res => {
						this.formDataSet(res);
						this.dataInfo.push(res);
					})
					.catch(err => {
						this.dataInfo.push(err);
						this.$router.back();
					});
			},

			formDataSet(form) {
				if (!form.OrgMemberCredential && !form.UnionCredential) {
					toast("您暂无组织管理权限");
					return;
				}
				this.approvalmanagementData = form;

				const requestMethods = {
					0: this.actived == 0 ? selectWaitAuditEnrollApprovalRecords :
						selectWaitAuditTransferApprovalRecords,
					1: this.actived == 0 ? selectApprovalsPassed : selectFinishEnrollApprovalRecords,
					2: this.actived == 0 ? selectApprovalsPassed : selectFinishEnrollApprovalRecords
				};

				const requestMethod = requestMethods[this.activeList];
				const status = this.activeList > 0 && this.activeList == 1 ? 0 : 1;

				if (requestMethod) {
					requestMethod({
							pageDomain: {
								pageNum: this.pageNum,
								pageSize: this.pageSize
							},
							loginPhone: form.PhoneNumberCredential.mobileNumber,
							requestSource: this.requestSource,
							status
						})
						.then(res => {
							const newDataList = res.data.records || [];
							const newData = newDataList.map(item => {
								return {
									...item,
									eye: true
								}
							})
							if (this.actived == 0) {
								this.dataList = this.updateDataList(newData, this.dataList);
								this.$refs.paging.complete(this.dataList);
							} else {
								this.dataListTest = this.updateDataList(newData, this.dataListTest);
								this.$refs.pagingTest.complete(this.dataListTest);
							}
						})
						.catch(err => console.error(err));
				}
			},

			updateDataList(newData, existingData) {
				const combinedData = [...existingData, ...newData];
				const uniqueData = Array.from(new Set(combinedData.map(item => item.id)))
					.map(id => combinedData.find(item => item.id == id));
				return uniqueData;
			},

			goTransferApprovalDetails() {
				this.$tab.navigateTo('/pages/work/transferapprovaldetails');
			},

			goMembershipApprovalDetails() {
				this.$tab.navigateTo('/pages/work/membershipapprovaldetails');
			},

			changeActive(index) {
				this.actived = index;
				this.activeList = 0; // 默认选择“待审批”视图
				this.pageNum = 0; // 切换选项卡时重置页码
				this.reloadPaging(); // 重新加载数据
			},
			changeTabList(index) {
				this.activeList = index;
				this.pageNum = 0; // 切换视图选项卡时重置页码
				this.reloadPaging(); // 重新加载数据
			},
			reloadPaging() {
				this.dataList = [];
				this.dataListTest = [];
				this.formDataSet(this.approvalmanagementData); // 请求审批记录
			},
			queryList() {
				this.pageNum += 1;
				this.formDataSet(this.approvalmanagementData); // 重新请求审批记录
			},
			/**
			 * @param {Object} dateTime 中文年月日 时间格式
			 */
			formatDateTime(dateTime, type = true) {
				const date = new Date(dateTime);
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // 月份从0开始
				const day = date.getDate();
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');

				if (type) {
					return `${year}年${month}月${day}日 ${hours}：${minutes}`;
				} else {
					return `${year}/${month}/${day} ${hours}：${minutes}`;
				}
			}

		},

	};
</script>




<style lang="scss" scoped>
	.view1 {
		display: flex;
		justify-content: space-between;

		.view1_time {}

		.view1_content {}

		.view1_name {}
	}





	.Approvalmanagement {

		.background-fs-bottom {
			margin: 32rpx;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			overflow: hidden;
			background-color: #fff;
		}

		.background-fs {
			margin: 32rpx;
			border-radius: 20rpx;
			overflow: hidden;
			background-color: #fff;
		}

		.tabs {
			font-weight: 500;
			height: 88rpx;
			padding: 20rpx 0;
			margin-bottom: 20rpx;
		}

		.tab-items {
			height: 100%;
		}

		.active {
			color: rgb(189, 26, 45);
		}

		.line {
			border: 3rpx solid rgb(189, 26, 45);
			background-color: rgb(189, 26, 45);
			width: 20rpx;
			border-radius: 3px;
			margin: 10rpx auto;
		}

		.left {
			background-image: url(@/static/images/left.png);
			background-position: 0% 0%;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 350rpx;
			height: 192rpx;
			display: flex;
			align-items: center;
			justify-content: center;

		}

		.right {
			background-image: url(@/static/images/right.png);
			background-position: 0% 0%;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 350rpx;
			height: 192rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.left-img {
			width: 120rpx;
			height: 120rpx;
			margin-left: 72rpx;
		}

		.right-img {
			width: 120rpx;
			height: 120rpx;
			margin-left: 36rpx;
		}

		.text-number {
			font-size: 20px;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
		}

		.marginb8 {
			margin-bottom: 16rpx;
		}

		.text-app {
			font-size: 12px;
			color: rgba(153, 153, 153, 1);
		}

		.text-right {
			font-size: 12px;
			color: rgba(153, 153, 153, 1);
		}

		.margin16 {
			margin: 32rpx;
		}

		.list {
			position: relative;
			min-height: 600px;

			::v-deep .z-paging-content-fixed,
			.zp-loading-fixed {
				position: absolute;
				top: 0 !important;
			}

			.item {
				display: flex;

				.item-name {
					color: #333333;
				}

				.item-phone {
					color: #333333;
					margin: 4rpx 0 24rpx 0;
				}

				.item-code {
					font-size: 24rpx;
					color: rgba(102, 102, 102, 1);
				}

				.text-end {
					text-align: end;
				}

				.item-status {
					padding: 4rpx 8rpx;
					font-size: 10px;
					background: rgb(230, 250, 185);
					color: rgba(91, 133, 0, 1);
				}

				.transferout {
					position: relative;

					.transferout-status {
						padding: 2px 4px;
						font-size: 10px;
						color: rgba(189, 26, 45, 1);
						border-radius: 2px;
						border: 1px solid rgb(189, 26, 45);
						position: absolute;
						top: 0;
						right: 0;
					}

					.transferout-statuss {
						padding: 2px 4px;
						font-size: 10px;
						color: rgba(189, 26, 45, 1);
						border-radius: 2px;
						border: 1px solid rgb(189, 26, 45);
						position: absolute;
						bottom: 0;
						right: 0;
					}

					.pending {
						background: rgba(189, 26, 45, 1);
						color: rgba(255, 255, 255, 1);
					}
				}
			}

			.time {
				margin-top: 24rpx;
				font-size: 10px;
				color: rgba(153, 153, 153, 1);
			}
		}
	}
</style>